<template>

  <div class="xj-detail">
    <van-nav-bar
      :title="shopInfo.b_title || '加载中'"
      left-arrow
      @click-left="back()"
      />
    <div style="text-align: center;padding: 20px;color: #ccc;" v-show="isLoading">数据加载中</div>
    <div v-show="!isLoading">
      <baidu-map id="allmap" class="allmap" @ready="handler"></baidu-map>
      <!-- 顶部banner -->
      <div class="swipe-detail">
        <van-swipe indicator-color="white" :autoplay="5000">
          <van-swipe-item v-for="(item,index) in banner" :key="index">
            <img v-lazy="publicUrl  + item.filepath" width="100%" height="100%" alt="">
          </van-swipe-item>
        </van-swipe>
        <!-- banner数量 -->
        <div class="banner-num">
          <span>{{count}}张图</span>
        </div>
      </div>
      <!-- 公司名称 -->
      <div class="company-name">
        <span class="name">{{shopInfo.b_title}}</span>
        <div class="score" style="color:#ffd21e">
          <van-rate readonly size='14' style="float:left" v-model="score" allow-half void-icon="star" void-color="#eee" color="#ffd21e" />
          <span style="float:left">4.7</span>
        </div>
        <!-- <div class="royal"></div> -->
        <div class="collection" @click="postAddLikeShop">收藏</div>
      </div>
      <!-- 地址 -->
      <div class="address" @click="handlerMapGaode">
        <!-- 左图标 -->
        <div class="left-icon">
          <van-icon name="location" size="25" color="#c6cad3" />
        </div>
        <!-- 地址 -->
        <div class="mid-add">
          {{shopInfo.address}}
        </div>
        <!-- 电话 -->
        <div class="right-share">
          <van-icon name="share" color="#8a8a8a" size="30" />
        </div>
      </div>
      <!-- 联系 -->
      <div class="contact">
        <!-- 左头像 -->
        <div class="left-head">
          <div :style="headDiv">
            <img v-lazy="publicUrl + shopInfo.filepath" alt="" width="100%" height="100%">
          </div>
        </div>
        <!-- 欢迎 -->
        <div class="mid-welcome">
          <div>欢迎光临本店，我是店主</div>
          <div>更多咨询请联系我：{{shopInfo.b_phone}}</div>
        </div>
        <!-- 电话 -->
        <div class="right-tell">
          <div class="circle">
            <div>
              <a :href="'tel:' + shopInfo.b_phone">
                <van-icon name="phone" color="#6e90e6" size="0.45rem" />
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 精品推荐 -->
      <div class="recommend">
        <div class="commend-title"></div>
        <div class="commend-goods">
          <ul>
            <li v-for="(goods,index) in goodsList" :key="index">
              <div class="goods-pic" @click="jump('goodsdetail',{id:goods.id})">
                <!-- <img v-lazy="publicUrl + goods.filepath" width="100%" alt=""> -->
                <van-image
                  width="100%"
                  lazy-load
                  :src="publicUrl + goods.filepath"
                />
              </div>
              <div class="goods-name" @click="jump('goodsdetail',{id:goods.id})">{{goods.title}}</div>
              <div class="price" @click="jump('goodsdetail',{id:goods.id})">¥{{goods.price}}
                <span>¥{{goods.old_price}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 商户介绍 -->
      <div class="introduce">
        <div class="introduce-title"></div>
        <div class="introduce-main">
          <div class="introduce-time">
            <div>
              <van-icon name="underway-o" size="0.33rem" color="#b3b3b3" />
            </div>
            <div>{{shopInfo.time_start || '0:00'}}-{{shopInfo.time_end || '0:00'}}</div>
          </div>
          <div class="introduce-support">
            <div>
              <van-icon name="apps-o" size="0.33rem" color="#b3b3b3" />
            </div>
            <ul style="width:95%" v-if="tagList.length>0">
              <li v-for="(item, index) in tagList" :key="index">{{item}}</li>
            </ul>
          </div>
          <div class="introduce-content">
            <p style="text-indent: 2em;">{{shopInfo.content || ''}}</p>
            <!-- <p>除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：</p>
            <img src="/static/detail/detail.jpg" width="100%" alt="">
            <img src="/static/detail/detail1.jpg" width="100%" alt=""> -->
          </div>
        </div>
      </div>
      <div class="test">
      </div>
    </div>

    <van-popup
      v-model="mapShow"
      v-show="mapShowVisit"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <AddressMap ref="AddressMap" :flag="true" @handlerBack="mapShow=false" @handlerGetPoi="mapShow=false"/>
    </van-popup>
  </div>
</template>
<script>
import { postShop, postShopList, postAddLikeShop, getWxcfg } from '../../api/ajax.js'
import AddressMap from '../../components/addressMap/addressMap'
import { Toast } from 'vant';
import wx from 'weixin-js-sdk'

export default {
  components: {
    AddressMap
  },
  data: function () {
    return {
      isLoading: true,
      mapShow: true,
      mapShowVisit: false,
      banner: [],
      count: '',
      score: 5,
      address: '定位中',
      headDiv: {
        backgroundSize: 'cover',
      },
      shopInfo: [],
      goodsList: [],
      tagList: [],
      locationPoint: {},
      currentPoint: {}
    }
  },
  mounted() {
    setTimeout(() => {
      this.mapShow = false;
      this.mapShowVisit = true;
    }, 0)
    this.initWxConfig();
  },
  methods: {
    async initWxConfig() {
      const result = await getWxcfg({ url: location.href.split('#')[0] });
        wx.config({
          debug: false,
          appId: result.appId,
          timestamp: result.timestamp,
          nonceStr: result.nonceStr,
          signature: result.signature,
          jsApiList: ['openLocation'] // 所有要调用的 API 都要加到这个列表中
        });
        wx.ready(() => {
        });
        wx.error((res) => {
          alert(JSON.stringify(res))
        })
    },
    handlerMapGaode() {
      let _this = this;
      console.log('handlerMapGaode')
      wx.openLocation({
        latitude: parseFloat(_this.shopInfo.lat || 0),
        longitude: parseFloat(_this.shopInfo.lng || 0),
        name: _this.shopInfo.b_title,
        address: _this.shopInfo.address,
        scale: 14,
        infoUrl: 'http://weixin.qq.com'
      });
      // window.location.href = `http://uri.amap.com/navigation?from=${this.currentPoint.lng},${this.currentPoint.lat}&to=${this.locationPoint.lng},${this.locationPoint.lat}&mode=car&src=nyx_super;`

    },
    async postAddLikeShop() {
      const result = await postAddLikeShop({
        id: this.shopInfo.b_id
      });
      console.log(result)
      const { code } = result;
      if(code === 1) {
        Toast.success('取消收藏成功');
      }else if(code === 2) {
        Toast.success('收藏成功');
      }

    },
    goods_detail() {
      this.jump('goodsdetail', {
        id: 1
      });
    },
    async postShop(lat, lng) {
      let b_id = this.$route.query.id;
      const result = await postShop({ id: b_id, lat, lng, });
      this.isLoading = false;
      if (!!result) {
        this.banner = result.imglist;
        this.count = this.banner.length;
        this.shopInfo = result.info;
        this.goodsList = result.goods_list;
        this.tagList = result.info.tag.split(',') || [];
        this.$refs.AddressMap.loadMap([result.info.lng, result.info.lat]);
        let _this = this;
        var geocoder = new AMap.Geocoder({
          city: "010", //城市设为北京，默认：“全国”
          radius: 1000 //范围，默认：500
        });
        this.locationPoint.lng = result.info.lng
        this.locationPoint.lat = result.info.lat
        geocoder.getAddress([result.info.lng, result.info.lat], function (status, result) {
          if (status === 'complete' && result.regeocode) {
            // _this.address = result.regeocode.formattedAddress;
          } else {
            console.log('根据经纬度查询地址失败')
          }
        });
      }
    },
    handler({ BMap, map }) {
      this.loacl(BMap, map, (data) => {
        this.currentPoint.lat = data.point.lat
        this.currentPoint.lng = data.point.lng
        this.postShop(data.point.lat, data.point.lng);
      });
    },

  },
};
</script>
<style lang="scss" scoped>
.xj-detail {
  width: 100%;
  position: relative;
  .swipe-detail {
    height: 66vw;
    .van-swipe {
      height: 100%;
      .van-swipe__track {
        height: 100% !important;
      }
    }
    .banner-num {
      text-align: center;
      color: white;
      width: px2rem(57);
      height: px2rem(32);
      line-height: px2rem(32);
      background-color: rgba(69, 55, 55, 0.6);
      position: absolute;
      right: 0;
      top: 0;
    }
    img {
      height: auto;
      width: 100%;
    }
  }
  //公司名
  .company-name {
    width: 100%;
    height: px2rem(49);
    text-align: center;
    display: flex;
    flex-flow: column;
    padding-top: px2rem(5);
    border-bottom: px2rem(2) #f3f3f3 solid;
    position: relative;
    .name {
      font-weight: bold;
      font-size: px2rem(14);
    }
    .score {
      margin: px2rem(3) auto;
    }
    .royal {
      position: absolute;
      top: 0;
      left: px2rem(12);
      width: px2rem(23);
      height: px2rem(29);
      background-image: url("/static/detail/royal.jpg");
      background-repeat: no-repeat;
    }
    .collection {
      width: px2rem(40);
      height: px2rem(27);
      position: absolute;
      top: px2rem(12);
      right: 0;
      background-color: red;
      color: #fff;
      background-color: #f09d53;
      text-align: center;
      line-height: px2rem(27);
      border-radius: px2rem(5) px2rem(0) px2rem(0) px2rem(5);
    }
  }
  //地址
  .address {
    height: px2rem(55);
    display: flex;
    .left-icon {
      margin: auto 0;
      text-align: center;
      width: 10%;
    }
    .mid-add {
      width: 75%;
      margin: auto 0;
    }
    .right-share {
      width: 15%;
      margin: auto 0;
      text-align: center;
    }
  }
  //联系方式
  .contact {
    height: px2rem(78);
    display: flex;
    border-top: px2rem(11) #f3f3f3 solid;
    border-bottom: px2rem(11) #f3f3f3 solid;
    .left-head {
      width: 22%;
      margin: auto 0;
      div {
        margin: 0 auto;
        width: px2rem(45);
        height: px2rem(45);
      }
      img{
          width:100%;
          height: 100%;
      }
    }
    .mid-welcome {
      margin: auto 0;
      width: 60%;
      div:first-child {
        font-weight: bold;
        font-size: px2rem(15);
      }
      div:last-child {
        color: gray;
      }
    }
    .right-tell {
      width: 15%;
      margin: auto 0;
      text-align: center;
      .circle {
        display: flex;
        float: right;
        margin: 0 auto;
        width: px2rem(35);
        height: px2rem(35);
        border-radius: 50%;
        border: px2rem(1) #6e90e6 solid;
        div {
          margin: auto auto;
        }
      }
    }
  }

  //精品推荐
  .recommend {
    overflow: hidden;
    .commend-title {
      height: px2rem(34);
      background: url("/static/detail/jieshao.jpg") no-repeat;
      background-size: contain;
    }
    .commend-goods {
      li {
        float: left;
        width: 50%;
        text-align: center;
        line-height: px2rem(25);
        height: px2rem(245);
      }
      .goods-pic {
        width: px2rem(175);
        height: px2rem(175);
        margin: px2rem(5) auto;
        overflow: hidden;
        img {
          height: auto;
        }
      }
      .goods-name {
        width: px2rem(175);
        // float: left;
        margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .price {
        color: #de853e;
        font-size: px2rem(18);
        span {
          color: gray;
          font-size: px2rem(13);
          text-decoration: line-through;
        }
      }
    }
  }

  //商户介绍
  .introduce {
    .introduce-title {
      height: px2rem(34);
      background: url("/static/detail/introduce.jpg") no-repeat;
      background-size: contain;
    }
    .introduce-main {
      // overflow: hidden;
      border-top: px2rem(2) #f3f3f3 solid;
      width: 95%;
      margin: 0 auto;
      .introduce-time {
        height: px2rem(34);
        display: flex;
        align-content: center;
        div:first-child {
          text-align: center;
          margin: auto 0;
          width: 5%;
          // background-color: red;
        }
        div:last-child {
          padding-left: px2rem(10);
          margin: auto 0;
          margin-top: px2rem(7);
          width: 95%;
        }
      }

      .introduce-support {
        height: px2rem(34);
        display: flex;
        align-content: center;
        div:first-child {
          text-align: center;
          margin: auto 0;
          width: 5%;
        }

        li {
          float: left;
          width: px2rem(65);
          height: px2rem(18);
          border: px2rem(1) #e38132 solid;
          border-radius: px2rem(2);
          text-align: center;
          line-height: px2rem(18);
          color: #e38132;
          margin-left: px2rem(10);
          margin-top: px2rem(6);
        }
      }

      .introduce-content {
        // height: px2rem(111);
        margin-top: px2rem(20);
        // overflow: hidden;
        p {
          line-height: px2rem(21);
          font-size: px2rem(14);
        }
        img {
          vertical-align: top;
        }
      }
    }
  }

  //商户信息
  .information {
    width: 100%;
    height: px2rem(56);
    background-color: red;
    position: fixed;
    background-color: white;
    bottom: px2rem(0);
    li {
      float: left;
      width: 33.3333333333333333%;
      display: flex;
      height: px2rem(56);
      padding-left: px2rem(10);
      div:first-child {
        text-align: center;
        margin: auto 0;
        width: 15%;
        // background-color: red;
      }
      div:last-child {
        color: #7c7c7c;
        padding-left: px2rem(10);
        // margin: auto 0;
        padding-top: px2rem(14);
        width: 85%;
        font-size: px2rem(18);
      }
    }
  }

  .test {
    height: px2rem(56);
    width: 100%;
  }
}
</style>
